<template>
    <div class="detail">
        <img :src="bannerImg" @click="handleClick"/>
        <div>
            <detail-nabar v-if="isNav" :style="opacitys"></detail-nabar>
            <router-link v-else tag="i" to="/" class="iconfont bg">&#xe6d8;</router-link>
        </div>
        <v-fade>
            <detail-gallary slot="fade" :gallaryImgs="gallaryImgs" v-show="isGallary" @toggle="hide"></detail-gallary>
        </v-fade>
       
       <div class="info">
          <span class="iconfont">&#xe64a;</span>
          <em>34</em>
      </div>
      <div class="word">
          <p>知音号游船</p>
      </div>
      
      <detail-list :categoryList="categoryList"></detail-list>
       <div class="content"></div>
    </div>
</template>
<script>
import {DetailModel} from '../../models/DetailModel';
import DetailGallary from './components/gallary';
import DetailNabar from './components/nabar';
import DetailList from './components/list';
import VFade from './components/fade';
var detailModel =new DetailModel();
export default {
    name:"detail",
    data(){
        return {
            bannerImg:"",
            sightName:"",
            gallaryImgs:[],
            categoryList:[],
            isGallary:false,
            isNav:false,
            opacitys:{
                opacity:0
            }
        }
    },
    components:{
    DetailGallary,
    DetailNabar,
    DetailList,
    VFade
    },
    mounted(){
        window.addEventListener("scroll",this.handleScroll)
        var id=this.$route.params.id;
        console.log(id)
        detailModel.getDetailData(id).then(res=>{
            // console.log(res)
            var data=res.data.data;
            this.sightName=data.sightName;
            this.gallaryImgs=data.gallaryImgs;
            this.categoryList=data.categoryList;
            this.bannerImg=data.bannerImg;
        })
    },
    destroyed(){
        window.removeEventListener("scroll",this.handleScroll)
    },
    methods:{ 
        handleScroll(){
           var top=document.documentElement.scrollTop || document.body.scrollTop;
           if(top>0){
               this.isNav=true;
               var opacity=top/300;
               if(opacity>1){
                   opacity=1;
               }
               this.opacitys.opacity=opacity;
           }else{
               this.isNav=false
           }
        },
        handleClick(){
            this.isGallary=true
        },
        hide(){
            this.isGallary=false
        }
    }
}
</script>
<style lang="scss" scoped>
 .detail img{
     width:100%;
     height: 400px;
 }
 .bg{
  position: absolute;
  left:15px;
  top:15px;
  color:rgb(119, 116, 116);
  font-size: 40px;
 }
 .info{
     width: 120px;
     position: absolute;
      display: flex;
     align-items: center;
     justify-content: center;
     top:240px;
     left:40px;
     color: #fff;
     background-color: #666;
     border-radius: 25px;
     opacity: 0.5;
 }
 .word{
     position: absolute;
     top:300px;
     left:28px;
     color: #fff;
     font-size: 38px;
 }
.content{
  height: 2000px;
}
</style>

